// 首页商品分类跳转
<template>
  <view class="page">
    <view class="top" :class="goodsCategoryList.length <= 0 ? 'top1' : ''">
      <view class="search-goods">
        <view>
          <text class="iconfont icon-sousuo"></text>
          <input
            type="text"
            @input="handleInput"
            placeholder="搜索商品"
            v-model="keyword"
          />
        </view>
      </view>
      <u-tabs
        font-size="32"
        bar-width="44"
        inactive-color="#666666"
        active-color="#111111"
        :list="goodsCategoryList"
        :current="current"
        @change="change"
        :bar-style="{ backgroundColor: '#FE492F' }"
        v-if="hasNextLevel"
      ></u-tabs>
    </view>
    <view
      class="bottom"
      :style="{ marginTop: hasNextLevel ? '160rpx' : '70rpx' }"
      v-if="goodsList.length > 0"
    >
      <view class="items-box">
        <view
          @tap="toDetail(item.id)"
          class="item"
          v-for="(item, index) in goodsList"
          :key="index"
        >
          <view class="image-box">
            <image :src="item.goods_image" />
          </view>
          <view class="item-bottom">
            <view class="content-box"> {{ item.goods_name }} </view>
            <view class="icon-box">
              <view class="money">
                <view
                  class="money-box"
                  v-if="item.price !== '' && bind == 1 && priceStatus"
                >
                  <text class="money-left">￥</text>
                  <text class="money-right">{{ item.price+'.'+ item.decimal }}</text>
                </view>
              </view>
              <text class="t-icon t-icon-a-" @tap.stop="showPop(item)"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 空白页 -->
    <view style="margin-top: 300rpx">
      <dht-empty type="no_data" v-if="noData"></dht-empty>
    </view>
    <!-- 选择规格弹出框 -->
    <pop-choose :goods="goods" v-model="show"></pop-choose>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      // 空白页
      noData: false,
      pid: '',
      id: '',
      current: 0,
      page: 1,
      hasMore: true,
      keyword: '',
      goodsCategoryList: [],
      goodsList: [],
      show: false,
      goods: null,
      bind: '',
      hasNextLevel: false
    }
  },
  async onLoad(options) {
    this.pid = options.id
    uni.setNavigationBarTitle({ title: options.titleName })
    await this.getGoodsCategoryList()
    if (this.goodsCategoryList.length) {
      this.id = this.goodsCategoryList[0].id
      this.hasNextLevel = true
    } else {
      this.id = this.pid
      this.hasNextLevel = false
    }
    this.getGoodsList()
  },
  onShow() {
    const userInfo = uni.getStorageSync('userInfo')
    this.bind = userInfo.binding
  },
  onReachBottom() {
    if (!this.hasMore) return
    this.page++
    this.getGoodsList()
  },
  methods: {
    // 搜索商品
    handleInput() {
      clearTimeout(this.timeId)
      this.timeId = setTimeout(() => {
        this.page = 1
        this.hasMore = true
        this.goodsList = []
        this.getGoodsList()
      }, 1000)
    },
    // 弹出框
    showPop(goods) {
      this.goods = goods
      this.show = true
    },
    // tabs 改变
    change(index) {
      this.current = index
      this.id = this.goodsCategoryList[index].id
      this.page = 1
      this.hasMore = true
      this.keyword = ''
      this.goodsList = []
      this.getGoodsList()
    },
    // 获取商品分类列表
    async getGoodsCategoryList() {
      const res = await this.$http.post(
        '/api/kuerp/order/index/goodsTypeList',
        {
          pid: this.pid
        }
      )
      if (res.code == 200) {
        this.goodsCategoryList = res.data
      }
    },
    // 获取商品列表
    async getGoodsList() {
      let goodsList = []
      const res = await this.$http.post(
        '/api/kuerp/order/index/goodsGoodsList',
        {
          keyword: this.keyword,
          goods_type_id: this.id,
          page: this.page
        }
      )
      if (res.code == 200) {
        if (!res.data.list.length) this.hasMore = false
        goodsList = res.data.list
        goodsList.map(
          (item) =>
            (item.goods_image = item.goods_image.startsWith('http')
              ? item.goods_image
              : this.$baseURL + item.goods_image)
        )
        this.goodsList = [...this.goodsList, ...goodsList]
        this.noData = !this.goodsList.length
      }
    },
    // 前往商品详情页
    toDetail(id) {
      uni.navigateTo({ url: `/pages/home/homeGoods/goodsDetail?id=${id}` })
    }
  },
  computed: {
    ...mapState(['priceStatus'])
  }
}
</script>

<style >
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
/deep/scroll-view {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }
}
.top {
  background: #fff;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  padding: 0 24rpx;

  .search-goods {
    height: 70rpx;

    background-color: #fff;
    view {
      display: flex;
      align-items: center;
      margin: 0 auto;
      width: 702rpx;
      height: 70rpx;
      background: #f4f4f4;
      border-radius: 35rpx;

      text {
        margin: 0 26rpx;
        color: #808080;
      }
      input {
        flex: 1;
      }
    }
  }
}
.top1 {
  padding-bottom: 10rpx;
}
.bottom {
  width: 100vw;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  background: #f7f7f7;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 10rpx 24rpx 100rpx;
  .items-box {
    display: flex;
    flex-wrap: wrap;

    .t-icon-a- {
      width: 44rpx;
      height: 44rpx;
    }

    .item {
      margin-top: 20rpx;
      width: 340rpx;
      height: 540rpx;
      background: #ffffff;
      border-radius: 12rpx;

      &:nth-child(odd) {
        margin-right: 22rpx;
      }
      .image-box {
        image {
          width: 340rp;
          height: 340rpx;
        }
      }
      .item-bottom {
        padding: 0 24rpx 28rpx 24rpx;
        height: 200rpx;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .content-box {
          margin-top: 14rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .icon-box {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .money {
            .money-box {
              // display: flex;
              // justify-content: center;
              // align-items: center;
              // align-items: flex-end;
              .money-left {
                font-size: 26rpx;
                font-weight: 500;
                color: #fe3d23;
              }
              .money-right {
                font-size: 32rpx;
                font-weight: 500;
                color: #fe3d23;
              }
            }
          }
        }
      }
    }
  }
}
</style>
